<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-04-25 13:51:35
 * @LastEditTime: 2022-04-29 12:53:36
-->
<!-- 代回款弹窗 -->
<template>
  <div class='payment_task_modal'>
    <Row :gutter="16" type="flex" justify="center" v-if="payment.message">
      <Col span="20" class="tips">
      <Icon type="md-alert" class="tips_icon" />
      {{payment.message}}
      </Col>
    </Row>
    <dt-info class="pay-info" ref="info" :options="options" :info="payment" :label-width="170"></dt-info>
    <dt-info class="date-info" ref="infoDate" :options="optionsDate" :info="payment" :label-width="200"></dt-info>
    <Row :gutter="16" type="flex" justify="center" v-if="payment.repaymentAmount">
      <Col span="20" class="tips line_h50"
        style="color: red;font-weight: 600;font-size: 17px;">
      本次回款金额：{{payment.repaymentAmount}}元
      </Col>
    </Row>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">取消回款</Button>
      <Button type="primary" :loading="loading" @click="submitFun()"
        style="margin-left: 8px">确定</Button>
    </div>
  </div>
</template>
<script>
  import comMgr from '@/biz/sales/salesCommon'
  import moment from 'moment'
  import dt from '@dt/dt'
  import ParamsPayment from './paymentTask'
  export default {
    components: {},
    data() {
      return {
        payment: {
          repaymentPlanDate:'',
          repaymentPlanAmount:null,
          receiptTypeStr:'',
          customerName:'',
          room:'',
          area:null,
          userName:'',
          creditDate:''
        },
        loading: false,
        options:[],
        optionsDate:[]
      }
    },
    props: ['paymentPlanId'],
    computed: {},
    watch: {},
    methods: {
      handleClose() {
        this.$emit('onClose')
      },
      submitFun() {
        console.log('确定')
        let that = this
        this.$Modal.confirm({
          title: '回款确认',
          content: `您将代顾问 ${that.payment.userName} 回款 <span style="color:red;font-weight: 600;font-size:17px">${that.payment.repaymentAmount}元</span>，回款后无需审核直接入账。请确认是否立即回款？`,
          okText: '确定',
          cancelText: '取消回款',
          onOk: () => {
            this.loading = true
            let params = {
              repaymentPlanId: this.payment.repaymentPlanId,
              taskPrimaryKey: this.payment.taskPrimaryKey,
              pendingPaymentMoney: this.payment.repaymentAmount,
              creditDate: this.payment.creditDate
            }
            comMgr
              .enterOtherPaymentWebFun(params)
              .then((res) => {
                this.loading = false
                that.$Message.success('回款成功!')
                that.$emit('onChangeTable')
                that.$emit('onClose')
              })
              .catch((err) => {
                that.$emit('onClose')
                this.loading = false
              })
          },
          onCancel: () => {},
        })
      },
      initdetails() {
        let params = {
          paymentPlanId: this.paymentPlanId,
        }
        this.options = new ParamsPayment(this).options().infoOpt 
        this.optionsDate = new ParamsPayment(this).options().dateOpt 
        comMgr.getRepaymentDetailsFun(params).then((res) => {
          let filterArr = dt
            .dictInfo().returnedMoneyType.filter(item => item.key == res.receipType)
          res.receiptTypeStr = filterArr.length ? filterArr[0].value : ''
          this.payment = { ...res, creditDate: moment(new Date()).format('YYYY-MM-DD') }
        })
      },
    },
    mounted() {
      this.initdetails()
    },
  }
</script>
<style lang='scss' scoped>
  .payment_task_modal {
    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: 100%;
      line-height: 32px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }

      .AssignCustomers_name {
        margin-left: 10px;
        cursor: pointer;
        color: #0f42a7;
      }
    }
    .pay-info {
      ::v-deep .ivu-form-item{
        margin-bottom: 20px !important;
      }
    }
    .date-info{
      width: 570px;
      margin: auto;
      background-color: rgb(254, 252, 236); 
      ::v-deep .ivu-form{
        margin-bottom: 20px;
        height: 50px;
        padding-top: 8px;
      }
      ::v-deep .ivu-form-item{
        text-align: center;
      }
    }

    .line_h50 {
      line-height: 50px;
    }

    .entry_date {
      margin-bottom: 20px;
      height: 50px;
      padding-top: 8px;
    }
  }
</style>